<style scoped>
  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }
</style>
<template>
  <div :class="isAdmin == 1?'entryStaffIndex':'entryStaffIndex entryStaffIndexSmore'">
    <div class="sta_title">
      <div class="goBack" @click="saveEntry">
        <Icon type="ios-arrow-back"/>
        <span class="gb_font">返回</span></div>
      <div class="st_font">
        <span class="stf_title">异常停机</span>
      </div>
    </div>
    <div class="content">
      <div class="place">
        <div class="place_title">
          <span class="title">异常停机原因</span>
          <div class="pButtons" v-if="entryData.status == undefined || entryData.status == 0 || entryData.status == 1 || entryData.status == 3">
            <Button type="primary" @click="starShutdown" v-if="entryData.status == undefined">开始停机</Button>
            <Button type="primary" @click="endShutdown" v-if="entryData.status == 0">确认开机</Button>
            <Button type="primary" @click="updateShutdown" v-if="entryData.status == 3">确认修改</Button>
            <Button type="primary" @click="agree(1)" v-if="entryData.status == 1 && is_power == 1">同意</Button>
            <Button type="primary" @click="agree(2)" v-if="entryData.status == 1 && is_power == 1">拒绝</Button>
          </div>
        </div>
        <div class="place_input">
          <div class="pi_inputs">
            <Select v-model="selectValue" :disabled="entryData.status == 2">
              <Option v-for="item in selectList" :value="item.parameter_id" :key="item.parameter_id">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="sites">
            <RadioGroup v-model="siteChoose" type="button">
              <Radio :label="item.site_id" v-for="item in siteList">{{item.name}}</Radio>
            </RadioGroup>
          </div>
        </div>
        <div class="place_input" style="margin-top: 16px">
          <div class="pi_inputs">
            <DatePicker size="large" type="date" placeholder="选择日期"  :editable="false" :clearable="false"
                        :value="chooseDate" @on-change="dateChange" style="height:36px;margin-right:10px;" :disabled="entryData.status == 2"></DatePicker>
          </div>
          <div class="pi_inputs">
            <TimePicker v-model="chooseTime" format="HH:mm" placeholder="选择时间" :editable="false" :clearable="false" :disabled="entryData.status == 2"></TimePicker>
          </div>
        </div>
        <div class="place_input" style="margin-top: 16px" v-if="entryData.status == 3">
          <div class="pi_inputs">
            <DatePicker size="large" type="date" placeholder="选择日期"  :editable="false" :clearable="false"
                        :value="chooseDate2" @on-change="dateChange" style="height:36px;margin-right:10px;" :disabled="entryData.status == 2"></DatePicker>
          </div>
          <div class="pi_inputs">
            <TimePicker v-model="chooseTime2" format="HH:mm" placeholder="选择时间" :editable="false" :clearable="false" :disabled="entryData.status == 2"></TimePicker>
          </div>
        </div>
      </div>
      <!-- 富文本框 -->
      <div class="richText">
        <div id="wangeditor">
          <div ref="editorElem" style="text-align:left"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import cookie from 'js-cookie';
  import E from 'wangeditor'

  export default {
    props: ['entryData'],
    data() {
      return {
        isCollapsed: false,
        selectValue: '',
        selectList: [],
        isAdmin: cookie.get('isAdmin'),
        chooseDate: cookie.get('chooseDate'),
        chooseDate2: cookie.get('chooseDate'),
        chooseTime: '',
        chooseTime2: '',
        siteList: [],
        siteChoose: '',
        is_power: 0,
      };
    },
    created() {
      window.document.title = 'SCS';
    },
    mounted() {
      let self = this
      if (self.entryData.parameter_id != undefined) {
        self.selectValue = self.entryData.parameter_id
      }
      let date2 = new Date();
      let hour = date2.getHours();
      let min = date2.getMinutes();
      if (hour >= 1 && hour <= 9) {
        hour = "0" + hour;
      }
      if (min >= 0 && min <= 9) {
        min = "0" + min;
      }
      let currentTime = hour + ':' + min;
      this.chooseTime = currentTime
      this.siteChoose = this.entryData.site_id
      this.createdEditor()
      this.getInfo()
      if (self.entryData.status == 0) {
        self.chooseDate = self.entryData.start_ymd
        self.chooseTime = self.entryData.start_time.substring(9,self.entryData.start_time.length)
      }
      if (self.entryData.status == 3) {
        self.chooseDate = self.entryData.start_ymd
        self.chooseTime = self.entryData.start_time.substring(9,self.entryData.start_time.length)
        self.chooseDate2 = self.entryData.end_ymd
        self.chooseTime2 = self.entryData.end_time.substring(9,self.entryData.end_time.length)
      }
    },
    methods: {
      saveEntry() {
        let self = this
        this.publicInfo()
        this.$emit('saveEntry', self.entryData)
      },
      createdEditor() {
        var editor = new E(this.$refs.editorElem)        //创建富文本实例
        editor.customConfig.uploadImgServer = 'http://file.scs.cqapps.net/upload.php'
        editor.customConfig.uploadFileName = 'upload_file'
        editor.customConfig.menus = [          //菜单配置
          'image',  // 插入图片
          'video',  // 插入视频
          'list',  // 列表
          'justify',  // 对齐方式
          'link',  // 插入链接
        ]
        editor.customConfig.uploadImgParams = {
          server: 'item',
          from: 'wangeditor',
          domain: 'scs.cqapps.net'
        }
        //下面是最重要的的方法
        editor.customConfig.uploadImgHooks = {
          before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
          },
          success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            this.imgUrl = Object.values(result.data).toString()
          },
          fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          },
          error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
          },
          timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
          },

          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
          // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
          customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            let url = Object.values(result.data)      //result.data就是服务器返回的图片名字和链接
            JSON.stringify(url)    //在这里转成JSON格式
            insertImg(url)
            // result 必须是一个 JSON 格式字符串！！！否则报错
          }
        }
        editor.customConfig.onchange = (html) => {
          this.entryData.cont = html
        }
        editor.create()
        editor.txt.html(this.entryData.cont)
        if (this.entryData.status != undefined) {
          if (this.entryData.status == 2) {
            editor.$textElem.attr('contenteditable', false)
          }
        }
      },
      getInfo() {
        let self = this
        let str = {
          unit_id: self.entryData.unit_id,
          uid: cookie.get('uid')
        };
        this.$Loading.start();
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/equipmentchoice', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          // console.log(res,'获取参数！')
          self.is_power = res.data.is_power
          self.siteList = res.data.device_list
          self.selectList = res.data.list
          if (self.siteList.length == 1) {
            self.siteChoose = self.siteList[0].site_id
          }
        }).catch(function (error) {
          // this.$Loading.finish();
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
        });
      },
      starShutdown() {
        let self = this
        let str = {
          unit_id: self.entryData.unit_id,
          parameter_id: self.selectValue,
          cont: self.entryData.cont,
          uid: cookie.get('uid'),
          site_id: self.siteChoose,
          ymd: self.chooseDate + ' ' + self.chooseTime
        };
        // console.log(str)
        this.$Loading.start();
        if (self.siteChoose == '') {
          this.$Message.error('未选择设备');
          this.$Loading.finish();
          return
        }
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/equipmentstart', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          console.log(res)
          this.$emit('saveEntry', self.entryData)
        }).catch(function (error) {
          // this.$Loading.finish();
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
        });
      },
      endShutdown() {
        let self = this
        let str = {
          unit_id: self.entryData.unit_id,
          stoptime_id: self.entryData.stoptime_id,
          parameter_id: self.selectValue,
          cont: self.entryData.cont,
          uid: cookie.get('uid'),
          site_id: self.siteChoose,
          ymd: self.chooseDate + ' ' + self.chooseTime
        };
        this.$Loading.start();
        if (self.siteChoose == '') {
          this.$Message.error('未选择设备');
          this.$Loading.finish();
          return
        }
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/equipmentend', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          this.publicInfo()
          this.$emit('saveEntry', self.entryData)
        }).catch(function (error) {
          // this.$Loading.finish();
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
        });
      },
      publicInfo() {
        let self = this
        this.$Loading.start();
        var str = {
          uid: cookie.get('uid'),
          unit_id: self.entryData.unit_id,
          ymd: self.entryData.create_ymd,
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/reporttj', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          // console.log(res,666)
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      dateChange(val) {
        let self = this
        self.chooseDate = val
        cookie.set('chooseDate',val)
        self.getInfo()
      },
      updateShutdown() {
        let self = this
        let str = {
          unit_id: self.entryData.unit_id,
          uid: cookie.get('uid'),
          cont: self.entryData.cont,
          stoptime_id: self.entryData.stoptime_id,
          parameter_id: self.selectValue,
          site_id: self.siteChoose,
          start_time: self.chooseDate + ' ' + self.chooseTime,
          end_time: self.chooseDate2 + ' ' + self.chooseTime2,
        };
        this.$Loading.start();
        if (self.siteChoose == '') {
          this.$Message.error('未选择设备');
          this.$Loading.finish();
          return
        }
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/upstoptime', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          this.publicInfo()
          this.$emit('saveEntry', self.entryData)
        }).catch(function (error) {
          console.log(error)
          // this.$Loading.finish();
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
        });
      },
      agree(boo) {
        let self = this
        let str = {
          uid: cookie.get('uid'),
          stoptime_id: self.entryData.stoptime_id,
          is_status: boo
        };
        this.$Loading.start();
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/Stoptimetrial', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          console.log(res,'审核结果')
          this.publicInfo()
          this.$emit('saveEntry', self.entryData)
        }).catch(function (error) {
          // this.$Loading.finish();
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
        });
      },
    },
  }
</script>
<style lang="less">
  .entryStaffIndex {
    width: 79%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    opacity: 10;
    background: #f4f4f4;
    padding: 0 16px;
    box-sizing: border-box;
    z-index: 9;
    .sta_title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      margin: 16px 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      .goBack {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        .ivu-icon {
          font-size: 20px;
          line-height: 36px;
        }
        .gb_font {
          font-size: 17px;
          color: #666666;
          line-height: 37px;
        }
      }
      .st_font {
        display: flex;
        flex-direction: row;
        .stf_title {
          font-size: 17px;
          color: #222222;
          margin-left: 50px;
          margin-right: 50px;
        }
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      background: #f4f4f4;
      .selectDiv{
        padding: 16px;
        background: #fff;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        display: flex;
        flex-direction: column;
        .title{
          font-size: 13px;
          color: #666666;
          margin-bottom: 10px;
        }
        .select{
          z-index: 20000;
          margin-bottom: 10px;
          .blueL {
            color: #3384dd;
          }
          .yellowL {
            color: #f2ca51;
          }
          .orangeL {
            color: #ffb11b;
          }
          .redL {
            color: #f15c60;
          }
          .garyL {
            color: #cccccc;
          }
        }
        .tips{
          font-size: 12px;
          color: #999999;
        }
      }
      .place {
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        display: flex;
        flex-direction: column;
        .place_title {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .title{
            font-size: 15px;
            color: #222222;
            line-height: 30px;
          }
          .pButtons{
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            button{
              margin-top: auto;
              margin-bottom: auto;
              margin-right: 10px;
              width: 70px;
              height: 30px;
              padding: 0;
            }
          }
        }
        .place_input {
          width: 60%;
          display: flex;
          flex-direction: row;
          position: relative;
          .pi_inputs{
            width: 36%;
          }
          .sites{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .ivu-radio-wrapper{
              height: 36px !important;
              line-height: 36px !important;
              padding: 0 8px !important;
            }
          }
          .ivu-input{
            height: 36px;
            line-height: 36px;
          }
          .ivu-select-single .ivu-select-selection{
            height: 36px;
            margin-right: 10px;
          }
          .ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
            height: 36px;
            line-height: 36px;
          }
          .ivu-select-dropdown{
            z-index: 10009 !important;
          }
        }
        .place_input:nth-child(2){
          margin-top: 16px;
        }
      }
      .richText {
        width: 100%;
        height: 340px;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-top: none;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        margin-bottom: 16px;
      }
    }
  }
  @media screen and (min-width: 850px) and (max-width: 1400px) {
    .entryStaffIndexSmore{
      width: 100%;
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    .entryStaffIndex{
      width: 100%;
      padding: 0 8px;
      .sta_title{
        margin: 8px 0 !important;
        .goBack{
          .gb_font{
            font-size: 14px !important;
          }
        }
        .st_font{
          width: 32%;
          .stf_title{
            margin-left: 10px !important;
            margin-right: 10px !important;
          }
          .stf_up,.stf_down{
            font-size: 14px !important;
          }
        }
      }
      .content{
        .place{
          padding: 8px !important;
          .place_title{
            .title{
              font-size: 14px !important;
              line-height: 40px;
            }
          }
          .place_input{
            width: 100%;
            input{
              font-size: 14px !important;
            }
          }
        }
        .richText{
          margin-bottom: 8px !important;
        }
        .explain{
          .explain_title{
            font-size: 14px !important;
            padding: 8px !important;
          }
          .explain_content{
            p{
              font-size: 14px !important;
              padding: 8px !important;
            }
          }
        }
        .pButtons{
          height: 40px;
          bottom: 55px;
        }
      }
    }
  }
</style>

